<template>
    <a-menu
      class="h-full w-full"
      @click="handleClick"
    >
      <a-menu-item
        v-for="(item, i) in data"
        :key="i"
      >
        <span
          v-if="item.type === 'group'"
          style="font-weight: 600; font-size: 1.1em;">
          <a-icon type="tags" theme="twoTone" />
          <span>{{ item.name }}</span>
        </span>
        <template v-else>
          <span>{{ item.name }}</span>
        </template>
        <span
          class="number-red m-l-xs"
          v-if="item.count !== void 0"
        >({{ item.count }})</span>
      </a-menu-item>
    </a-menu>
</template>

<script>
export default {
  name: 'Menu',
  props: {
    data: Array
  },
  methods: {
    handleClick ({ key }) {
      this.$emit('item-click', { key })
    }
  }
}
</script>

<style scoped>

</style>
